<template>
    <div class="thumb-example">
        <swiper class=" swiper-top swiper gallery-top" :options="swiperOptionTop"
                ref="swiperTop">

            <swiper-slide class="slide-1" v-for="pic in pictureList"
            >
                <img :src="pic" style="height: 100%;width: 100%">

            </swiper-slide>
            <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
            <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
        </swiper>


    </div>
</template>

<script>
    import SwiperCore, {
        Navigation,
        Pagination,
        A11y,
        EffectCube,
        Mousewheel,
        HashNavigation
    } from 'swiper';
    import {Swiper, SwiperSlide, directive} from 'vue-awesome-swiper'
    import 'swiper/swiper-bundle.css'
    import 'swiper/components/navigation/navigation.scss';
    import 'swiper/components/pagination/pagination.scss';
    import 'swiper/components/scrollbar/scrollbar.scss';

    SwiperCore.use([Navigation, Pagination, A11y, EffectCube, Mousewheel, HashNavigation]);

    export default {
        props: {
            pictureList: Array,
        },
        components: {
            Swiper,
            SwiperSlide,
        },
        directives: {
            swiper: directive
        },
        name: "swiperCommon",
        data() {
            return {
                //轮播大图配置
                swiperOptionTop: {
                    hashNavigation: true,//猫导航
                    mousewheel: true,//鼠标滚动
                    effect: "fade",// 默认为"slide"（位移切换），可设置为'slide'（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    }
                },

            }
        },
        mounted() {

        },
    }
</script>

<style scoped>

    .thumb-example {
        height: 390px;
        width: 350px;
        overflow: auto;
    }

    .swiper-top {
        border: thin solid #eaeaea;
    }

    .gallery-top {
        height: 80%;
        width: 100%;
    }

</style>